import { Card } from 'antd';

import { FormattedMessage, setLocale, getLocale } from 'umi';
import React from 'react';
import { Pie } from './Charts';
import styles from '../style.less';

const ServerChart = ({ loading, serverPieData, serverPieTotal }) => (
  <Card
    loading={loading}
    className={styles.salesCard}
    bordered={false}
    title={getLocale() === 'zh-CN' ? '服务器分布' : 'Server distribution'}
    style={{
      height: '95%',
    }}
  >
    <div>
      <Pie
        hasLegend
        subTitle={getLocale() === 'zh-CN' ? '总资产数' : 'Total Num'}
        total={getLocale() === 'zh-CN' ? `${serverPieTotal}台` : `${serverPieTotal} servers`}
        data={serverPieData}
        height={248}
        lineWidth={4}
      />
    </div>
  </Card>
);

export default ServerChart;
